<template>
  <div>
    <div style='margin: 0 0 10px 0'>
      <Input v-model='searchValue' placeholder='请输入关键字' style='width: 300px'/>
      <Button type='primary' @click='search'>搜索</Button>
    </div>
    <Table border :columns='columns7' :data='data'></Table>
    <table-form :modal='modal' :formColumn='formColumn' @setModal='setModal'></table-form>
  </div>
</template>
<script>
import tableForm from './table-form'
import head from '../../../assets/images/logo-min.jpg'
export default {
  components: {
    tableForm
  },
  data () {
    return {
      searchValue: '', // 搜索
      modal: false, // 对话框显示状态
      formColumn: [], // 当前行数据
      // readOnly: true, // input只读状态
      fontSize: '14px',
      columns7: [
        {
          title: 'Head',
          key: 'head',
          render: (h, params) => {
            return h('img', {
              domProps: {
                src: params.row.head
              }
            })
          }
        },
        {
          title: 'Name',
          key: 'name',
          render: (h, params) => {
            if (params.row.$isEdit) {
              return h('div', [
                h('Input', {
                  props: {
                    value: params.row.name,
                    readonly: !params.row.$isEdit,
                    fontSize: '66px'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    'on-change': function (event) {
                      params.row.name = event.target.value
                    }
                  }
                })
              ])
            } else {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'md-person',
                    size: 15
                  }
                }),
                h(
                  'span',
                  {
                    style: {
                      fontSize: this.fontSize
                    }
                  },
                  params.row.name
                )
              ])
            }
          }
        },
        {
          title: 'Age',
          key: 'age',
          render: (h, params) => {
            if (params.row.$isEdit) {
              return h('div', [
                h('Input', {
                  props: {
                    value: params.row.age,
                    readonly: !params.row.$isEdit
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    'on-change': function (event) {
                      params.row.age = event.target.value
                    }
                  }
                })
              ])
            } else {
              return h(
                'span',
                {
                  style: {
                    fontSize: this.fontSize
                  }
                },
                params.row.age
              )
            }
          }
        },
        {
          title: 'Address',
          key: 'address',
          render: (h, params) => {
            if (params.row.$isEdit) {
              return h('div', [
                h('Input', {
                  props: {
                    value: params.row.address,
                    readonly: !params.row.$isEdit
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    'on-change': function (event) {
                      params.row.address = event.target.value
                      // this.data[params.index].address = event.target.value
                    }
                  }
                })
              ])
            } else {
              return h(
                'span',
                {
                  style: {
                    fontSize: this.fontSize
                  }
                },
                params.row.address
              )
            }
          }
        },
        {
          title: 'Action',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      if (params.row.$isEdit) {
                        this.handleSave(params)
                      } else {
                        this.handleEdit(params)
                      }
                    }
                  }
                },
                params.row.$isEdit ? '保存' : '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                },
                'View'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                },
                'Delete'
              )
            ])
          }
        }
      ],
      data: [
        {
          head: head,
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          $isEdit: false
        },
        {
          head: head,
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          $isEdit: false
        },
        {
          head: head,
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          $isEdit: false
        },
        {
          head: head,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          $isEdit: false
        }
      ]
    }
  },
  mounted () {
    this.findUser()
  },
  methods: {
    findUser () {
      var that = this
      this.axios
        .post(this.$api.url.selectUsers, {})
        .then(res => {
          that.data = res.data.data
          that.data.forEach(element => {
            // element['$isEdit'] = false
          })
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 搜索
    search () {
      var search = this.searchValue
      var array = this.data
      if (search !== '') {
        var arr = []
        for (let i = 0; i < array.length; i++) {
          for (var k in array[i]) {
            const ele = array[i][k]
            if (ele === search) {
              arr.push(array[i])
              break
            }
          }
        }
        this.data = arr
      } else {
        this.data = array
        this.$Message.warning('请输入关键字进行搜索')
      }
    },
    // 行可编辑方法
    handleEdit (params) {
      this.$set(params.row, '$isEdit', true)
    },
    handleSave (params) {
      this.$set(params.row, '$isEdit', false)
      for (var k in params.row) {
        const element = params.row[k]
        for (var key in this.data[params.index]) {
        //   const ele = this.data[params.index][key]
          if (k === key) {
            this.data[params.index][key] = element
          }
        }
      }
      console.log(this.data)
    },
    // 查看弹框方法
    setModal () {
      if (this.modal) {
        this.modal = false
      } else {
        this.modal = true
      }
    },
    show (index) {
      this.formColumn = this.data[index]
      this.setModal()
    },
    // 删除方法
    remove (index) {
      this.data.splice(index, 1)
    }
  }
}
</script>
